# Component: Social Media

Multi-platform social connectivity and newsletter integration

Utility Block

### BEM Anatomy

| Type      | Class Name         | Description                                                                                         |
| --------- | ------------------ | --------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-social-media` | The anchor wrapper. Dynamically modified by the platform type (e.g., `--facebook`, `--newsletter`). |
| Modifier  | `--newsletter`     | Custom styling for email/newsletter subscription links.                                             |
| Modifier  | `--facebook`       | Applies Facebook brand colors (Blue: `#1877F2`).                                                    |
| Modifier  | `--instagram`      | Applies Instagram brand colors (Gradient/Pink: `#E4405F`).                                          |
| Modifier  | `--linkedin`       | Applies LinkedIn brand colors (Blue: `#0A66C2`).                                                    |
| Modifier  | `--pinterest`      | Applies Pinterest brand colors (Red: `#BD081C`).                                                    |
| Modifier  | `--tiktok`         | Applies TikTok brand colors (Black/Cyan/Red).                                                       |
| Modifier  | `--twitter`        | Applies X/Twitter brand colors (Black).                                                             |
| Modifier  | `--youtube`        | Applies YouTube brand colors (Red: `#FF0000`).                                                      |
| Modifier  | `--rumble`         | Applies Rumble brand colors (Green: `#85C742`).                                                     |
| Modifier  | `--gpsnose`        | Custom platform-specific styling for GPSNose links.                                                 |
| Modifier  | `--bluesky`        | Applies Bluesky brand colors (Blue: `#0560FF`).                                                     |
| Modifier  | `--telegram`       | Applies Telegram brand colors (Blue: `#26A5E4`).                                                    |
| Element   | `__icon`           | The visual indicator. Supports FontAwesome `<i>` tags or `<svg>` containers.                        |
| Element   | `__label`          | Conditional text label. Controlled via the `ShowLabel` boolean.                                     |

### SVG & Icon Integration

The component handles icons in two ways: standard FontAwesome classes or raw HTML markup for custom SVGs. It features specific sizing logic for FontAwesome's `fa-2x` scale and implements a theme-aware color mapping for specialized platform icons like Rumble.

##### Generated HTML (Platform Link)

```html
<!-- Example: X / Twitter Link -->
<a href="https://x.com/username" target="_blank" class="as-social-media as-social-media--twitter">
    <i class="as-social-media__icon fa-brands fa-x-twitter"></i>
    <span class="as-social-media__label">Twitter</span>
</a>

<!-- Example: Newsletter Modal -->
<a href="javascript:void(0);" class="as-social-media as-social-media--newsletter">
    <i class="as-social-media__icon fa-solid fa-envelope"></i>
</a>
```

##### SCSS

```scss
.as-social-media {
  svg {
    width: 16px;
    height: 16px;
    vertical-align: top;
  }
  
  // Large icon override
  &.fa-2x svg {
    width: 32px;
    height: 32px;
  }

  // Dynamic Theme Mapping
  @each $color, $value in $theme-colors {
    .text-#{$color} & {
      &__rumble {
        fill: $value !important;
      }
    }
  }
}
```
